<template>
  <div class="Chief-Eleven" chief-style-set>
    <Title title="其他事项">
       <template #right>
        <div class="switch">
          <span v-for="(item,index) in showList" :key="item.name" :class="{choose:switchType == index}" @click="switchClick(index)">{{index > 0? '/' : ''}} {{item.name}} </span>
        </div>
      </template>
    </Title>
    <div class="content-h-auto Two-box" chief-style-set>
      <div class="Two-item" v-for="(item,index) in showItem" :key="index + 'showItem'">
        <div class="item-font">{{item.name || ''}}</div>
        <div class="item-num">{{item.value || ''}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import { rptVisPrjOtheritem } from "@/api/portalChief";
export default {
  name: "Chief-Eleven",
  components: {
    Title
  },
  data () {
    return {
      showItem: [],
      showList: [],
      switchType: 0
    };
  },
  created () {
    this.showItem = [];
    rptVisPrjOtheritem(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    disposeData (res) {
      if (res.status === 200 && res.data.data.length > 0) {
        this.showList = res.data.data;
        this.disposeShow(res.data.data[0].data);
      }
    },

    disposeShow (obj) {
      this.showItem = [];
      Object.keys(obj).forEach(item => {
        this.showItem.push({
          name: item,
          value: obj[item]
        });
      });
    },

    switchClick (i) {
      if (this.switchType === i) {return;}
      this.switchType = i;
      this.disposeShow(this.showList[i].data);
    }
  }
};
</script>

<style lang='less'>
.Chief-Eleven{

  .switch {
    span{
      cursor: pointer;
      &.choose {
        .color();
        font-weight: bold;
      }
    }
  }

  .Two-box{
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item-num{
      color: #ED7D33;
      font-size: 3vw;
      padding: 4vh 0;
      font-weight: bold;
      text-align: center;
    }
    .item-font{
      font-size: 1.1vw;
      text-align: center;
    }
  }
}
</style>